<template>
  <div class="car-search-address">
    <div class="place" @click="onClickCityName" :style="handleCityNameSly">
      <div class="city__name" v-if="!handleIsOpenCityName">
        <span class="name">{{ handleCurrentCityData.cityName }}</span>
        <icon type="icon-unfold" size="1"/>
      </div>
      <div class="city__select" v-else>
        <input type="text" placeholder="城市中文名或拼音" v-model="searchCityNameText">
      </div>
    </div>
    <div class="search__cont" :style="handleSearchSly">
      <icon type="icon-sousuo" size="2"/>
      <input type="text" :placeholder="placeholder" @focus="onFocusSearch" v-model="searchAddressText">
    </div>
    <div class="search_close" @click="onClickClose">取消</div>
  </div>
</template>

<script>
  import { mapState, mapMutations, mapGetters } from 'vuex'
  export default {
    name: 'car-search-address',
    data () {
      return {
        searchCityNameText: '',
        searchAddressText: '',
      }
    },
    props: {
      placeholder: '',
      currentCity: '',
      inputPlace: {
        type: false,
        default: false
      },
    },
    computed: {
      ...mapState([
        'userCarState'
      ]),
      ...mapGetters([
        'handleIsOpenCityName'
      ]),
      handleCurrentCityData () {
        let type = this.$route.params.address;
        let cityData = this.userCarState.callCarParams[type];
        if (type === 'endAddress' && cityData.cityName === '') {
          cityData = this.userCarState.callCarParams['startAddress'];
          this.SET_USER_CAR_END_ADDRESS({
            cityName: cityData.cityName,
            cityId: cityData.cityId
          })
        }
        return cityData
      },
      handleCityNameSly () {
        return {
          width: this.handleIsOpenCityName ? '40%' : '21%'
        }
      },
      handleSearchSly () {
        return {
          width: this.handleIsOpenCityName ? '40%' : '60%'
        }
      }
    },
    methods: {
      ...mapMutations([
        'SET_SHOW_TARGET_ADDRESS',
        'SET_SEARCH_CITY_NAME_TEXT',
        'SET_SEARCH_ADDRESS_TEXT',
        'SET_USER_CAR_END_ADDRESS'
      ]),
      onClickClose () {
        this.$router.push('/carIndex');
      },
      onClickCityName () {
        this.SET_SHOW_TARGET_ADDRESS('isOpenCityName');
      },
      onFocusSearch () {
        this.SET_SHOW_TARGET_ADDRESS('isOpenRemoteAddress');
      }
    },
    watch: {
      searchCityNameText () {
        this.SET_SEARCH_CITY_NAME_TEXT(this.searchCityNameText);
      },
      searchAddressText () {
        if (this.searchAddressText.length > 0) {
          this.SET_SHOW_TARGET_ADDRESS('isOpenRemoteAddress');
        }
        this.SET_SEARCH_ADDRESS_TEXT(this.searchAddressText);
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .car-search-address
    display flex
    justify-content space-between
    align-content center
    background #fff
    height 4 * .61rem
    .place
      width 30%
      line-height 2 * .61rem
      color $font_color_default
      border-right 1px #ddd solid
      font-size $sl_font_size_14
      transition all .5s
      .icon
        margin 0 .5 * .61rem
        color: $sl_font_color_desc_s
      .city__name
        height 100%
        font-size $sl_font_size_default
        display flex
        align-items center
        justify-content center
        padding-left 10px
        overflow hidden
        .name
          text-overflow ellipsis
          -webkit-line-clamp 1
          white-space nowrap
          overflow: hidden
      .city__select
        height 100%
        font-size $sl_font_size_default
        display flex
        align-items center
        padding-left 1 * .61rem
        input
          width 100%
          font-size $sl_font_size_default
          &::-webkit-input-placeholder
            color $sl_font_color_desc_s
    .search_close
      width 15%
      text-align right
      line-height 2 * .61rem
      font-size $sl_font_size_default
      border-left 1px #ddd solid
      color $sl_font_color_desc_s
      display flex
      justify-content center
      align-items center
    .search__cont
      width 50%
      display flex
      align-content center
      span
        color $sl_font_color_desc_s
        margin-right .5 * .61rem
        display flex !important
        align-items center
      input
        width 100%
        height 100%
        font-size $sl_font_size_default
        outline none
        &::placeholder
          color $sl_font_color_desc_s
</style>
